<template>
      <div id="dplayer"></div>
</template>
<style lang="scss" scoped>
    #dplayer{
        height:300px; 
        width: 500px;
    }
</style>
<script>
import Hls from 'hls.js';
import DPlayer from 'dplayer';
export default {
  data() {
    return {

    };
  },
  methods: {
  },
  created() {
    this.$store.commit("changeNavFlag", false);
  
  },
  mounted(){

    this.dp = new DPlayer({
    container: document.getElementById('dplayer'),
    live: true,
    video: {
        // url: "https://migu-bd.hls.huya.com/huyalive/1118386168-1118386168-4803432015858761728-2236895792-10057-A-0-1_2000.m3u8?wsSecret=267dd934bb61d7bc255094144cf1f98b&wsTime=6037bbad&u=0&seqid=16141788634549434&ctype=tars_mobile&txyp=o%3Acs7%3B&fs=bgct&t=103", 
         type: 'customHls',
           customType: {
            customHls: function (video) {
                const hls = new Hls();
                hls.loadSource(video.src);
                hls.attachMedia(video);
            },
           }
    },
});
  },

  beforeDestroy() {
    this.$store.commit("changeNavFlag", true);
  },
};
</script>